/*
 * @Description: 金额选择
 * @Author: ziwei.ma
 * @Date: 2019-05-06 10:13:18
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-05-30 14:10:26
 */

<template>
  <div class="recharge-option-wrapper flex-h flex-hw">
    <div
      class="recharge-amount flex-v flex-hc flex-vc"
      v-for="(option,index) in isRechargeAmount"
      :class="[index === selectedIndex ? 'recharge-amount-active ' + cardBgColorClass : 'recharge-amount ' +cardColorClass+' '+cardBorderClass ]"
      :key="index"
      @click="changedThis(index)"
    >
      <span class="fontsize60 flex-hw">{{option.prop_names.substr(5)}}</span>
      <span class="fontsize32 flex-hw">售价:{{option.sale_price}}元</span>
    </div>
  </div>
</template>

<script>
import { getBusCardPrice } from '../api/api.js'
export default {
  props: {
    cardType: {
      type: String, default: ''
    }
  },
  computed: {
    BgColorClass() {
      if (this.cardType === 'BusCard') {
        return 'baseBgColorNoActive'
      } else {
        return 'staffBgColor'
      }
    }
  },
  watch: {

  },
  data() {
    return {
      isRechargeAmount: {},
      selectedIndex: '',
      cardBgColorClass: '',
      cardColorClass: '',
      cardBorderClass: ''
    }
  },
  mounted() {
    // 根据卡状态更换主题颜色
    if (this.cardType === 'BusCard') {
      this.cardBgColorClass = 'baseBgColorNoActive'
      this.cardColorClass = 'baseColorNoAcitve'
      this.cardBorderClass = 'baseBorder'
    } else {
      this.cardBgColorClass = 'staffBgColor'
      this.cardColorClass = 'staffColor'
      this.cardBorderClass = 'staffBorder'
    }
    this.busCardPrice()
  },
  methods: {
    // 点击选中金额选项
    changedThis(index) {
      this.selectedIndex = index
      this.$emit('setSkuObj', this.isRechargeAmount[index].skuid, this.isRechargeAmount[index].sale_price)
    },
    // 通过协议获取SKU_MAP对象
    busCardPrice() {
      getBusCardPrice(this.cardType === 'BusCard' ? 'online_recharge' : 'staff_recharge').then(result => {
        // 获取SKU_MAP对象并传给isRechargeAmount
        this.isRechargeAmount = result
        // 获取SKU_MAP中的第一个对象
        this.selectedIndex = Object.keys(result)[0]
        console.log('selectedIndex:' + this.selectedIndex)
        this.changedThis(this.selectedIndex)
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped>
/* 充值金额选择 */
.recharge-option-wrapper {
  width: 705px;
  min-height: 235px;
  padding: 22.5px;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee; /*no*/
  margin-bottom: 16px;
}

/* 金额未选中 */
.recharge-amount {
  width: 220px;
  height: 220px;
  border-radius: 4px;
  /* border: 1px solid #28acff; no */
  margin: 7.5px;
  box-sizing: border-box;
}

/* 金额选中 */
.recharge-amount-active {
  color: #ffffff;
}

/* 员工卡背景颜色 */
.staffBgColor {
  background-color: #19b2de;
}
/* 员工卡字体颜色 */
.staffColor {
  color: #19b2de;
}
/* 员工卡border颜色 */
.staffBorder {
  border: 1px solid #19b2de; /*no*/
}
</style>
